<template>
  <div class="rst-content-body">
    <template v-for="item in dataList" :key="item.id">
      <div class="rst-user">
        <image class="user-img" :src="item.referenceImage" mode="aspectFit"></image>
        <div class="time-txt">
          <div class="time">{{ item.time }}</div>
          <u-read-more>
            <div class="txt">{{ item.prompt }}</div>
          </u-read-more>
        </div>
      </div>
    </template>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref, shallowRef } from 'vue';
import { getAiList } from '@/api/designApi';

const emit = defineEmits(['colorChange']);

const pageNum = ref(1);
const paging = shallowRef(null);
const dataList = shallowRef([]);

function queryList() {
  const params = {
    pageNum: pageNum.value,
    pageSize: 10,
  };
  // 此处请求仅为演示，请替换为自己项目中的请求
  getAiList(params).then((res) => {
    // console.log('getAiList', res);
  });
}

onMounted(() => {
  queryList();
});
</script>

<style scoped lang="scss">
.rst-content-body {
  .rst-user {
    padding: 20rpx 32rpx;
    display: flex;
    gap: 24rpx;
    background: #ffffff;
    .user-img {
      flex-shrink: 0;
      width: 108rpx;
      height: 108rpx;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
    }
    .time-txt {
      display: flex;
      flex-direction: column;
      gap: 16rpx;
      .time {
        font-weight: 400;
        font-size: 24rpx;
        color: #6f6f6f;
        line-height: 32rpx;
      }
      .text {
        font-weight: 400;
        font-size: 24rpx;
        color: #222222;
        line-height: 34rpx;
      }
    }
  }
  .rst-ai {
    margin: 10rpx 32rpx;
    background: #f3f7f8;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    padding: 16rpx;
    .ai-tip {
      font-weight: 400;
      font-size: 24rpx;
      color: #222222;
      line-height: 32rpx;
      margin: 16rpx 0 20rpx;
    }
    .rst-img {
      width: 500rpx;
      margin: auto;
    }
  }
}
</style>
